<template>
  <div class="annularChart" :id="id"></div>
</template>
<script>
  import * as echarts from 'echarts'
  export default {
    props: ["id","list","title"],
    data() {
      return {
        arr: []
      };
    },
    watch:{
      list:function(val){
        this.arr = val;
        this.getAnnular()
      }
    },
    methods: {
      getAnnular() {
        let than = this;
        let charts = echarts.init(document.querySelector(`#${this.id}`));
        charts.setOption({
          color:than.list.color,
          title: {
            text:than.title,
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data:than.arr.xAxis,
          },
          yAxis: {
            type: "value",
          },
          series:than.arr.series
        },true);
        window.addEventListener("resize", function () {
          charts.resize();
        });
      },
    },
    mounted() {
      // this.getAnnular();
    },
    created() { //data和bar在这里循环，生成渲染所需要的对象
      // this.bar.forEach((val, i) => {
      //   this.data.forEach((item, index) => {
      //     if (i == index) {
      //       this.arr.push({
      //         value: item,
      //         name: val
      //       });
      //     }
      //   });
      // });
    }
  };
</script>
<style scoped>
  .annularChart {
     width: 900px;
    height: 637px;
    margin: 0 auto;
    background-color: #fff;
  }
</style>
